<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>lianxi</title>

	<meta name="author" content="Codrops">
	<link href="./css/css" rel="stylesheet" type="text/css">

	<link rel="stylesheet" type="text/css" href="./css/normalize.css">

	<link rel="stylesheet" type="text/css" href="./css/demo.css">

	<link rel="stylesheet" type="text/css" href="./css/set2.css">

	<link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="./css/demoadpacks.css">
	<style>
	html{
		background-color: purple;
	}
		.grid{
			width: 500px;
			height: 500px;
			background-color: red;
			/*padding-top:0;*/
			position: absolute;
			top:200px;
			left:100px;
		}
		.box{
			display: block;
			width: 400px;
			height: 200px;
		}
		figcaption{
			width: 400px;
			height: 400px;
			background-color: blue;
		}

	</style>
</head>
<body>
	<div class="grid"><!-- 必须要 承装图片的容器 可以更改位置-->
		<figure class="effect-selena"><!-- 必须要 可以改变图片位置 不可以改变大小 -->
			<div class="box"></div>
			<figcaption><!-- 图片里的文字 -->

				<h2>Happy <span>Selena</span></h2>

				<p>Selena is a tiny-winged bird.</p>

				<a href="#/index2.html#">View more</a>

			</figcaption>
		</figure>
	</div>
</body>
</html>